우측 패널 (Animation)

생성일: 2026년 9월 9일 오전 10:54

우측 패널 구조 이해하기

우측 속성 패널은 선택한 요소의 스타일과 동작을 설정하는 영역입니다.
선택한 컴포넌트 종류에 따라 설정 가능한 항목이 변경됩니다.

우측 패널 구성

탭	설명
Style	디자인 및 레이아웃 설정
Animation	인터랙션 및 모션 설정
Data	데이터 연결 설정

Animation 탭 이해하기

Animation은 요소에 움직임과 인터랙션 효과를 적용하는 기능입니다.
등장, 클릭, 호버, 반복 등의 애니메이션을 간편하게 설정할 수 있습니다.

1. 빠른 모션

자주 사용하는 애니메이션을 클릭 한 번으로 적용할 수 있습니다.

모션	설명
위로 페이드	아래에서 위로 자연스럽게 나타납니다.
팝 인	크기가 커지며 등장합니다.
호버 시 떠오름	마우스를 올리면 살짝 떠오릅니다.
누를 때 눌림	클릭 시 눌리는 효과를 적용합니다.
부드러운 펄스	크기가 반복적으로 변화합니다.
흐르는 티커	요소가 일정 방향으로 계속 이동합니다.

2. Animation 상세 설정

빠른 모션을 적용한 후에는 각 애니메이션의 속성을 세부적으로 조정할 수 있습니다.

Hover

마우스를 올렸을 때 실행되는 애니메이션입니다.
버튼이나 카드에 마우스를 올렸을 때 인터랙션을 줄 수 있습니다.

Press

요소를 클릭하거나 누르는 동안 실행되는 애니메이션입니다.
버튼이나 카드 등 요소를 클릭했을 때 눌리는 듯한 인터랙션을 표현할 수 있습니다.

Appear

페이지가 표시될 때 실행되는 등장 애니메이션입니다.
페이지 진입 시 자연스럽게 등장하는 효과를 연출할 수 있습니다.

Disappear

요소가 화면에서 사라질 때 실행되는 애니메이션입니다.
요소가 숨겨지거나 화면에서 제거될 때 자연스럽게 사라지는 효과를 적용할 수 있습니다.

Reveal

Reveal은 요소가 화면에 나타날 때 특정 방향이나 효과를 이용해 자연스럽게 드러나는 애니메이션입니다.

요소가 서서히 드러나며 등장하는 효과를 적용할 수 있습니다.

Loop

애니메이션을 반복 실행합니다.
지속적으로 강조해야 하는 요소에 활용할 수 있습니다.

Scroll

스크롤 위치에 따라 애니메이션이 실행됩니다.
스크롤에 따라 자연스럽게 등장하거나 움직이는 효과를 만들 수 있습니다.

Drag

Drag는 요소를 마우스로 드래그하여 이동하거나 위치를 변경할 수 있도록 설정하는 애니메이션입니다.
요소를 클릭한 상태에서 자유롭게 이동하거나 제한된 범위 안에서 드래그할 수 있습니다.

Ticker

텍스트나 요소를 일정 방향으로 계속 흐르게 하는 애니메이션입니다.
공지사항, 배너, 이벤트 문구 등에 활용하기 좋습니다.